<template>
	<view class="registration-form-page">
		<view class="form-block" style="border-radius:30rpx 30rpx 0 0 ;">
			<view class="form-title">填写问卷</view>
			<view class="form-item">
				<view class="form-label"><text class="require">*</text>乡镇、村、组</view>
				<view class="form-content">
					<MultipleColPicker class="form-ctrl" :range="township" :value="form.groupId"
						@selected="bindTownship"></MultipleColPicker>
					<view class="iconfont icon-gengduo1 arrow"></view>
				</view>
			</view>
			<view class="form-item">
				<view class="form-label"><text class="require">*</text>姓名</view>
				<view class="form-content">
					<input v-model.trim="form.realName" maxlength="5" type="text" placeholder="请输入姓名"
						placeholder-class="inputPlaceholder" class="form-ctrl" />
				</view>
			</view>
			<view class="form-item">
				<view class="form-label"><text class="require">*</text>身份证号码</view>
				<view class="form-content">
					<input v-model="form.idCard" @blur="getAgeFromIdCard" maxlength="18" type="idcard"
						placeholder="请输入身份证号码" placeholder-class="inputPlaceholder" class="form-ctrl"/>
				</view>
			</view>
			<view class="form-item">
				<view class="form-label"><text class="require">*</text>性别</view>
				<view class="form-content">
					<picker class="form-ctrl" :range="sex" range-key="value" :value="sexIndex" disabled
						@change="bindPicker($event,'sex')">{{sex[sexIndex]['value']}}</picker>
					<view class="iconfont icon-gengduo1 arrow"></view>
				</view>
			</view>
			<view class="form-item">
				<view class="form-label"><text class="require">*</text>民族</view>
				<view class="form-content">
					<picker class="form-ctrl" :range="nationId" range-key="name" :value="nationIdIndex"
						@change="bindPicker($event,'nationId')">{{nationId[nationIdIndex]['name']}}</picker>
					<view class="iconfont icon-gengduo1 arrow"></view>
				</view>
			</view>
			<view class="form-item">
				<view class="form-label">学历</view>
				<view class="form-content">
					<picker class="form-ctrl" :range="educationId" range-key="data" :value="educationIdIndex"
						@change="bindPicker($event,'educationId')">{{educationId[educationIdIndex]['data']}}</picker>
					<view class="iconfont icon-gengduo1 arrow"></view>
				</view>
			</view>

			<view class="form-item">
				<view class="form-label"><text class="require">*</text>手机号码</view>
				<view class="form-content">
					<input v-model.number="form.mobile" maxlength="11" type="number" placeholder="请输入手机号码"
						placeholder-class="inputPlaceholder" class="form-ctrl" disabled/>
				</view>
			</view>
			<view class="form-item">
				<view class="form-label"><text class="require">*</text>年龄（周岁）</view>
				<view class="form-content">
					<input v-model.number="form.age" maxlength="3" type="number" placeholder="请输入年龄"
						placeholder-class="inputPlaceholder" class="form-ctrl" disabled/>
				</view>
			</view>

			<view class="form-item">
				<view class="form-label"><text class="require">*</text>就业状态</view>
				<view class="form-content">
					<picker class="form-ctrl" :range="employment" range-key="value" :value="employmentIndex"
						@change="bindPicker($event,'employment')">{{employment[employmentIndex]['value']}}</picker>
					<view class="iconfont icon-gengduo1 arrow"></view>
				</view>
			</view>
			<template v-if="form.employment==1">
				<view class="form-item">
					<view class="form-label"><text class="require">*</text>从业类型</view>
					<view class="form-content">
						<picker class="form-ctrl" :range="practiceState" range-key="value" :value="practiceStateIndex"
							@change="bindPicker($event,'practiceState')">{{practiceState[practiceStateIndex]['value']}}
						</picker>
						<view class="iconfont icon-gengduo1 arrow"></view>
					</view>
				</view>
				<view class="form-item" v-if="form.practiceState==2">
					<view class="form-label"><text class="require">*</text>外出务工地点</view>
					<view class="form-content">
						<input v-model.trim="form.practiceAddress" maxlength="10" type="text"
							placeholder="请输入外出务工地点(城市)" placeholder-class="inputPlaceholder" class="form-ctrl" />
					</view>
				</view>
				<view class="form-item">
					<view class="form-label"><text class="require">*</text>从事工种</view>
					<view class="form-content">
						<picker class="form-ctrl" :range="jobProfession" range-key="name" :value="workTypeIdIndex"
							@change="bindPicker($event,'workTypeId','jobProfession')">
							{{jobProfession[workTypeIdIndex]['name']}}
						</picker>
						<view class="iconfont icon-gengduo1 arrow"></view>
					</view>
				</view>
			</template>

			<view class="form-item">
				<view class="form-label"><text class="require">*</text>是否有务工意愿</view>
				<view class="form-content">
					<picker class="form-ctrl" :range="is" range-key="value" :value="wishWorkIndex"
						@change="bindPicker($event,'wishWork','is')">{{is[wishWorkIndex]['value']}}</picker>
					<view class="iconfont icon-gengduo1 arrow"></view>
				</view>
			</view>
			<template v-if="form.wishWork==1">
				<view class="form-item">
					<view class="form-label"><text class="require">*</text>意愿务工地点</view>
					<view class="form-content">
						<input v-model.trim="form.wishPracticeAddress" maxlength="10" type="text"
							placeholder="请输入意愿务工地点(城市)" placeholder-class="inputPlaceholder" class="form-ctrl" />
					</view>
				</view>
				<view class="form-item">
					<view class="form-label"><text class="require">*</text>意愿务工工种</view>
					<view class="form-content">
						<picker class="form-ctrl" :range="jobProfession" range-key="name" :value="wishWorkTypeIdIndex"
							@change="bindPicker($event,'wishWorkTypeId','jobProfession')">
							{{jobProfession[wishWorkTypeIdIndex]['name']}}
						</picker>
						<view class="iconfont icon-gengduo1 arrow"></view>
					</view>
				</view>
			</template>

			<view class="form-item">
				<view class="form-label"><text class="require">*</text>是否有培训需求</view>
				<view class="form-content">
					<picker class="form-ctrl" :range="is" range-key="value" :value="whetherTrainIndex"
						@change="bindPicker($event,'whetherTrain','is')">{{is[whetherTrainIndex]['value']}}</picker>
					<view class="iconfont icon-gengduo1 arrow"></view>
				</view>
			</view>
			<template v-if="form.whetherTrain==1">
				<view class="form-item">
					<view class="form-label"><text class="require">*</text>意愿培训工种</view>
					<view class="form-content">
						<picker class="form-ctrl" :range="jobProfession" range-key="name" :value="trainWorkTypeIdIndex"
							@change="bindPicker($event,'trainWorkTypeId','jobProfession')">
							{{jobProfession[trainWorkTypeIdIndex]['name']}}
						</picker>
						<view class="iconfont icon-gengduo1 arrow"></view>
					</view>
				</view>
			</template>
			<view class="form-item">
				<view class="form-label">已持证名称</view>
				<view class="form-content">
					<input v-model.trim="form.certificateName" maxlength="10" type="text" placeholder="请输入已持证名称"
						placeholder-class="inputPlaceholder" class="form-ctrl" />
				</view>
			</view>
			<view class="form-item">
				<view class="form-label"><text class="require">*</text>是否退伍军人</view>
				<view class="form-content">
					<picker class="form-ctrl" :range="is" range-key="value" :value="veteranIndex"
						@change="bindPicker($event,'veteran','is')">{{is[veteranIndex]['value']}}</picker>
					<view class="iconfont icon-gengduo1 arrow"></view>
				</view>
			</view>
			<view class="form-item">
				<view class="form-label"><text class="require">*</text>是否返乡农民工</view>
				<view class="form-content">
					<picker class="form-ctrl" :range="is" range-key="value" :value="returnHomeIndex"
						@change="bindPicker($event,'returnHome','is')">{{is[returnHomeIndex]['value']}}</picker>
					<view class="iconfont icon-gengduo1 arrow"></view>
				</view>
			</view>
			<view class="form-item">
				<view class="form-label"><text class="require">*</text>是否脱贫劳动力</view>
				<view class="form-content">
					<picker class="form-ctrl" :range="is" range-key="value" :value="laborForceIndex"
						@change="bindPicker1($event,'overcomePoverty','is')">{{is[laborForceIndex]['value']}}</picker>
					<view class="iconfont icon-gengduo1 arrow"></view>
				</view>
			</view>
			<view class="form-item">
				<view class="form-label"><text class="require">*</text>是否防返贫监测劳动力</view>
				<view class="form-content">
					<picker class="form-ctrl" :range="is" range-key="value" :value="familyIndex"
						@change="bindPicker2($event,'isMonitorPoverty','is')">{{is[familyIndex]['value']}}</picker>
					<view class="iconfont icon-gengduo1 arrow"></view>
				</view>
			</view>
			<view class="form-item" v-if="form.isMonitorPoverty==1">
				<view class="form-label"><text class="require">*</text>户属性</view>
				<view class="form-content">
					<picker class="form-ctrl" :range="monitorPoverty" range-key="value" :value="domicileIndex"
						@change="bindPicker3($event,'monitorPoverty')">
						{{form.monitorPoverty==0 ? "请选择户籍类型" : monitorPoverty[domicileIndex]['value']}}
					</picker>
					<view class="iconfont icon-gengduo1 arrow"></view>
				</view>
			</view>
			<view class="form-item">
				<view class="form-label">备注</view>
				<view class="form-content">
					<input v-model="form.notes" maxlength="50" type="text" placeholder="请输入备注"
						placeholder-class="inputPlaceholder" class="form-ctrl" />
				</view>
			</view>
		</view>
		<view class="btn" @click="submit">提交问卷</view>
	</view>
</template>

<script>
	import {
		validate
	} from '@/util/validate.js'
	import {
		idCardValidate
	} from '@/util/idCardValidate.js';
	import MultipleColPicker from '@/page_other/components/Picker/MultipleColPicker'
	import {
		getEducation,
		getQuestionnaireConfig,
		addQuestionnaireInvestigation
	} from '@/api/registration.js'
	export default {
		components: {
			MultipleColPicker
		},
		data() {
			return {
				form: {
					realName: '',
					sex: 1,
					nationId: 0,
					educationId: 0,
					idCard: '',
					mobile: '',
					age: 16,
					household: 2,
					groupId: [],

					employment: 1,
					practiceState: 1,
					practiceAddress: '',
					workTypeId: 0,
					wishWork: 1,
					wishWorkTypeId: 0,
					wishPracticeAddress: '',

					whetherTrain: 1,
					trainWorkTypeId: 0,
					certificateName: '',

					veteran: 2,
					returnHome: 2,
					overcomePoverty: 2,
					notes: '',
					isMonitorPoverty: 2,
					monitorPoverty: '',
				},
				rules: {
					realName: {
						required: true,
						name: '姓名'
					},
					sex: {
						required: true,
						name: '性别'
					},
					age: {
						required: true,
						name: '年龄'
					},
					idCard: {
						required: true,
						name: '身份证号码',
					},
					mobile: {
						required: true,
						name: '手机号码',
					},
					nationId: {
						required: true,
						name: '民族',
					},
					employment: {
						required: true,
						name: '就业状态',
					},
					wishWork: {
						required: true,
						name: '是否有务工意愿',
					},
					whetherTrain: {
						required: true,
						name: '是否有培训需求',
					},
					veteran: {
						required: true,
						name: '是否退伍军人',
					},
					returnHome: {
						required: true,
						name: '是否返乡农民工',
					},
					groupId: {
						required: true,
						name: '所属乡镇村组',
					},
					overcomePoverty: {
						required: true,
						name: '是否脱贫劳动力',
					},
					isMonitorPoverty: {
						required: true,
						name: '是否脱贫劳动力',
					}

				},

				sex: [{
					id: 1,
					value: '男'
				}, {
					id: 2,
					value: '女'
				}],
				monitorPoverty: [{
					id: 1,
					value: '脱贫不稳定户'
				}, {
					id: 2,
					value: '边缘易致贫户'
				}, {
					id: 3,
					value: '突发严重困难户'
				}, ],
				domicileIndex: 0,
				sexIndex: 0,

				age: [],
				ageIndex: 0,

				nationId: [],
				nationIdIndex: 0,

				educationId: [],
				educationIdIndex: 0,

				township: [],

				employment: [{
					id: 1,
					value: '已就业'
				}, {
					id: 2,
					value: '未就业'
				}],
				employmentIndex: 0,

				practiceState: [{
					id: 1,
					value: '务农(偶尔打零工)'
				}, {
					id: 2,
					value: '常年外出打工'
				}],
				practiceStateIndex: 0,

				jobProfession: [],
				workTypeIdIndex: 0,
				wishWorkTypeIdIndex: 0,
				trainWorkTypeIdIndex: 0,

				is: [{
					id: 1,
					value: '是'
				}, {
					id: 2,
					value: '否'
				}],
				wishWorkIndex: 0,
				whetherTrainIndex: 0,
				veteranIndex: 1,
				returnHomeIndex: 1,
				laborForceIndex: 1,
				familyIndex: 1,
			}
		},
		methods: {
			getGenderByIdCard(idCard) {
			var gender = parseInt(idCard.substr(-2, 1), 10) % 2 === 1 ? 1 : 2;
			return gender;
			},
			getAgeFromIdCard() {
				// 校验身份证号码合法性
				const result = idCardValidate(this.form.idCard)
				console.log(result)
				if (!result.result) {
					this.showToast(result.msg)
					return
				}
				let sex = this.getGenderByIdCard(this.form.idCard);//提取性别
				this.form.sex = sex
				// 提取出生日期部分
				var birthdate = this.form.idCard.substring(6, 14); // 假设出生日期在身份证号码的第7到第14位

				// 将出生日期转换为日期对象
				var birthdateObject = new Date(birthdate.substring(0, 4), birthdate.substring(4, 6) - 1, birthdate
					.substring(6, 8));

				// 获取当前日期
				var currentDate = new Date();
				// 计算年龄
				var age = currentDate.getFullYear() - birthdateObject.getFullYear();
				// 如果当前日期还未达到出生日期的月份和日期，则减去一岁
				if (
					currentDate.getMonth() < birthdateObject.getMonth() ||
					(currentDate.getMonth() === birthdateObject.getMonth() && currentDate.getDate() < birthdateObject
						.getDate())
				) {
					age--;
				}
				this.form.age = age
			},
			bindPicker(e, key, rangeKey = '') {
				const index = e.detail.value;
				this.$set(this, key + 'Index', index);
				this.$set(this.form, key, this[rangeKey || key][index].id)
			},
			bindPicker1(e, key, rangeKey = '') {
				this.laborForceIndex = e.detail.value;
				const index = e.detail.value;
				this.$set(this, key + 'Index', index);
				this.$set(this.form, key, this[rangeKey || key][index].id)
			},
			bindPicker2(e, key, rangeKey = '') {
				this.familyIndex = e.detail.value;
				const index = e.detail.value;
				this.$set(this, key + 'Index', index);
				this.$set(this.form, key, this[rangeKey || key][index].id)
			},
			bindPicker3(e, key, rangeKey = '') {
				this.domicileIndex = e.detail.value;
				const index = e.detail.value;
				this.$set(this, key + 'Index', index);
				this.$set(this.form, key, this[rangeKey || key][index].id)
			},
			bindTownship(township) {
				this.form.groupId = township
			},
			submit() {
				let rules = JSON.parse(JSON.stringify(this.rules));
				let form = JSON.parse(JSON.stringify(this.form))
				rules.idCard.validator = function(value, form, callback) {
					const result = idCardValidate(value)
					if (!result.result) {
						callback(result.msg)
					}
					callback();
				}
				rules.mobile.validator = function(value, form, callback) {
					if (!/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/.test(value)) {
						callback('请输入正确的手机号码');
					}
					callback()
				}
				form.groupId = form.groupId.join(',');

				if (form.employment == 1) {
					rules.practiceState = {
						required: true,
						name: '从业类型'
					}
					rules.workTypeId = {
						required: true,
						name: '从事工种'
					}
					if (form.practiceState == 1) {
						delete form.practiceAddress;
					} else {
						rules.practiceAddress = {
							required: true,
							name: '外出务工地点'
						}
					}
				} else {
					delete form.practiceState;
					delete form.practiceAddress;
					delete form.workTypeId;
				}

				if (form.wishWork == 2) {
					delete form.wishPracticeAddress
					delete form.wishWorkTypeId
				} else {
					rules.wishPracticeAddress = {
						required: true,
						name: '意愿务工地点'
					}
					rules.wishWorkTypeId = {
						required: true,
						name: '意愿务工工种'
					}
				}

				if (form.whetherTrain == 2) {
					delete form.trainWorkTypeId
				} else {
					rules.trainWorkTypeId = {
						required: true,
						name: '意愿及培训工种'
					}
				}
				if (validate(form, rules)) {
					uni.showLoading({
						title: '提交中',
						mask: true
					})
					addQuestionnaireInvestigation(form).then(() => {
						this.showToast('提交成功,感谢您的参与', () => {
							uni.switchTab({
								url: '/pages/home/index'
							})
						})
					})
				}
			},
			async getConf() {
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				let education = await getEducation();
				this.educationId = education;
				this.educationId.unshift({
					id: 0,
					data: '请选择学历'
				})
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				let nation = await getQuestionnaireConfig({
					type: 1
				});
				this.nationId = nation;
				if (nation && nation.length > 0) {
					this.form.nationId = nation[0].id
				}
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				let township = await getQuestionnaireConfig({
					type: 2
				});
				// this.form.groupId=[township[0]?.id||0,township[0]?.child[0]?.id||0,township[0]?.child[0]?.child[0]?.id||0];
				this.township = township;
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				let jobProfession = await getQuestionnaireConfig({
					type: 3
				});
				this.jobProfession = jobProfession;
				if (jobProfession && jobProfession.length > 0) {
					this.form.workTypeId = jobProfession[0].id
					this.form.wishWorkTypeId = jobProfession[0].id
					this.form.trainWorkTypeId = jobProfession[0].id
				}
			}
		},
		onLoad() {
			for (let i = 16; i < 61; i++) {
				this.age.push({
					id: i,
					value: i + '岁'
				})
			}
			this.form.mobile = this.$store.getters.user.mobile
			this.getConf()
		}

	}
</script>

<style lang="scss">
	page {
		background: #fff;
	}

	.registration-form-page {
		width: 100%;
		padding-bottom: 150rpx;

		.btn {
			width: 350rpx;
			height: 80rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			background: #0256FF;
			color: #fff;
			font-size: 28rpx;
			border-radius: 40rpx;
			position: fixed;
			transform: translate(-50%, -50%);
			left: 50%;
			bottom: 0rpx;
			z-index: 999999;
		}

		.user-photo-block {
			width: 100%;
			height: 450rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			.user-photo {
				width: 180rpx;
				height: 180rpx;
				border-radius: 50%;
			}
		}

		.form-block {
			width: 100%;
			box-shadow: 0 0 10px 0 #efefef;
			background: #fff;
			padding: 30rpx;

			.form-title {
				font-size: 36rpx;
				font-weight: bold;
			}

			.sub-title {
				font-size: 26rpx;
				color: #999;
			}

			.form-item {
				display: flex;
				flex-direction: column;
				border-bottom: 1px solid #efefef;
				padding-top: 30rpx;

				.form-label {
					font-size: 28rpx;
					color: #999;

					.require {
						color: red;
					}
				}

				.form-content {
					display: flex;
					flex-direction: row;
					align-items: center;

					.form-ctrl {
						height: 100rpx;
						line-height: 100rpx;
						flex-grow: 1;
					}

					.arrow {
						flex-grow: 0;
						color: #999;
						font-size: 24rpx;
					}
				}
			}
		}
	}
</style>
